<template>
	<div class="add-popup">
		<!-- 添加弹窗 -->
		<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="100px">
			<el-form-item label="图片:" class="upload-box" prop="image">
				<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res); } "
				 multipleaccept="image/*"> <img v-if="addForm.image" :src="addForm.image" class="preview-img" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-row :gutter="20">
				<el-col :span="10">
					<el-form-item label="排序:" prop="sort">
						<el-input v-model="addForm.sort" placeholder="请输入排序" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="类型:" prop="type">
						<el-select v-model="addForm.type" placeholder="请选择">
							<el-option v-for="item in classifyList" :key="item.type" :label="item.name" :value="item.type"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="名称:" prop="name">
				<el-input v-model="addForm.name" placeholder="请输入名称"></el-input>
			</el-form-item>
			<el-form-item label="跳转ID:" prop="id">
				<el-input v-model="addForm.id" placeholder="请输入跳转ID"></el-input>
			</el-form-item>
			
			<el-form-item label="状态:" prop="is_online">
				<el-switch v-model="addForm.is_online" :active-value="1" :inactive-value="0"></el-switch>
			</el-form-item>
			<el-form-item label="备注:" >
				<el-input v-model="addForm.brief" placeholder="请输入备注"></el-input>
			</el-form-item>
		</el-form>
		<div style="padding-bottom: 20px;">
			<el-button @click="cancel()">取 消</el-button>
			<el-button type="primary" @click="addFabricClick('addForm')">确 定</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			layerid: {
				type: String,
				default: ''
			},
			type: {
				type: Number,
				default: 0
			},
			id: {
				type: Number,
				default: 0
			},
			info: Object
		},
		components: {

		},
		data() {
			return {
				classifyList: [{
						type: 1,
						name: '平台商品'
					}, {
						type: 2,
						name: 'N98套餐'
					}, {
						type: 3,
						name: '全屋套餐'
					},
					{
						type: 4,
						name: '活动'
					},
					{
						type: 5,
						name: '货架'
					},
					{
						type: 6,
						name: '商品列表'
					},
					{
						type: 7,
						name: '外链'
					}
				],
				styleOptions: [],
				spaceOptions: [],
				addForm: {
					image: '',
					is_online: 1,
					type: 1,
					sort: 0,
					id: '',
					name: '',
					store_id: localStorage.getItem('store_id'),
					brief:''
				},
				addFormRules: {
					image: [{
						required: true,
						message: '请上传图片'
					}],
					type: [{
						required: true,
						message: '请选择类型'
					}],
					id: [{
						required: true,
						message: '请输入跳转ID'
					}],
					sort: [{
						required: true,
						message: '请输入排序'
					}],
					name: [{
						required: true,
						message: '请输入名称'
					}]
				}
			};
		},
		methods: {
			init() {
				if (this.type == 1) {
					let data = {
						show_id: this.id,
						store_id: localStorage.getItem('store_id')
					};
					this.$http(this.$ApiList.ShowLists, data).then(res => {
						this.addForm = res.datas[0]
					});
				}
			},
			// 图片上传
			upload(params) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt5MB = file.size / 1024 <= 5024;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt5MB) {
					this.$message.error('图片不能大于5M');
					return;
				}
				let image = new FormData();
				image.append('file[]', file);
				this.$http(this.$ApiList.publicUpload, image).then(res => {
					this.addForm.image = res.datas[0];
				});
			},
			addFabricClick(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.type == 0) {
							this.$http(this.$ApiList.ShowAdd, this.addForm).then(res => {
								this.$layer.msg(res.datas);
								this.$parent.init();
								this.cancel();
							});
						} else {
							delete this.addForm.add_time
							this.$http(this.$ApiList.ShowUp, this.addForm).then(res => {
								this.$layer.msg(res.datas);
								this.$parent.init();
								this.cancel();
							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			cancel() {
				this.$layer.close(this.layerid);
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss">
	.add-popup {
		padding: 20px 20px;

		.el-upload,
		.preview-img {
			width: 300px;
			height: 200px;
		}

		.el-icon-plus {
			line-height: 200px;
			font-size: 60px;
		}
	}
</style>
